import useDelData from '@/hooks/use-del-data'
import useFetchList from '@/hooks/use-fetch-list'
import useInsert from '@/hooks/use-insert'
import { Button, Form, Input, message, Modal, Radio, Space, Table } from 'antd'
import React from 'react'
import { checking } from '../registerUserCheck/registerUserCheck.config'

function AdminUserManage() {
  const { dataSource, total, filterParams, setFilterParams, getData } = useFetchList({
    url: '/admin/base/user/page',
    defaultParams: {
      isback: false
    }
  })
  const { ids, setIds, delData } = useDelData({
    url: "/admin/base/user/delete",
    success: () => {
      setFilterParams({
        ...filterParams,
        page: 1
      })
    }
  })
  const columns = [
    {
      title: '昵称',
      dataIndex: 'nickName',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'id',
    },
    {
      title: '密码',
      dataIndex: 'password',
      key: 'id',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'id',
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (test, item) => {
        return (
          <Space>
            <Button  onClick={() => setDataInfo(item.id)}>编辑</Button>
            <Button danger onClick={() => delData([item.id])}>删除</Button>
          </Space>
        )
      }
    },
  ];
  const [form] = Form.useForm()
  const { handleOk, setIsModalOpen, isModalOpen,setDataInfo } = useInsert({
    form,
    createData: (data: any) => {
      fetch("/admin/base/user/add", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
      })
    },
    updateData:(data:any)=>{
      fetch("/admin/base/user/update", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
      })
    },
    getDetail:async (id:any)=>{
      const data=await fetch("/admin/base/user/info", {
        method: "POST",
        body: JSON.stringify({id}),
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => res.json()).then(res => {
        // console.log(res)
        return res.data
      })
      return data
    },
    success: () => {
      setFilterParams({ ...filterParams, page: 1 })
    },
  })
  //modal
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  return (
    <div>
      <Space>
        <Button onClick={() => getData()}>刷新</Button>
        <Button type='primary' onClick={() => setIsModalOpen(true)}>新增</Button>
        <Button disabled={ids.length === 0} danger onClick={() => delData()}>删除</Button>
        <Radio.Group size='large' defaultValue="" onChange={(e) => {
          setFilterParams({
            ...filterParams,
            page: 1,
            checking: e.target.value,
          } as any)
        }}>
          {
            checking.map((item, index) => (
              <Radio.Button key={index} value={item.value}>{item.label}</Radio.Button>
            ))
          }
        </Radio.Group>
        <Input placeholder='请输入活动名称' onChange={(e) => {
          setFilterParams({
            ...filterParams,
            page: 1,
            username: e.target.value,
          } as any)
        }}></Input>
      </Space>
      <Table style={{ marginTop: '20px' }} columns={columns} dataSource={dataSource} pagination={{
        total,
        pageSize: filterParams.size,
        current: filterParams.page,
        onChange: (page) => {
          setFilterParams({
            ...filterParams,
            page,
          })
        }
      }}
        rowSelection={{
          type: 'checkbox',
          onChange: (keys) => {
            // console.log(keys);
            setIds(keys)
          }
        }} />
        <Modal title="新增"  open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form labelCol={{span:4}} wrapperCol={{span:20}} form={form}>
          <Form.Item label='昵称' name='nickName'>
            <Input></Input>
          </Form.Item>
          <Form.Item label='用户名' name='username'>
            <Input></Input>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input.Password></Input.Password>
          </Form.Item>
          <Form.Item label='备注' name='remark'>
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

AdminUserManage.wrappers = ["@/wrappers/auth"]
export default AdminUserManage